<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="12"><div id="resume" style="height: 400px" /></el-col>
      <el-col :span="12"><div id="interview" style="height: 400px" /></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div id="recruitment" style="height: 600px;" /></el-col>
    </el-row>
  </div>
</template>

<script>
import { chartsResume, chartsInterview, chartsRecruitment } from '@/api/user'
import { socketBus, debugEvent } from '@/utils/websocket'
import { useSocket } from '@/utils/websocket'

export default {
  name: 'Dashboard',
  data() {
    return {
      resumeData: undefined,
      interviewData: undefined,
      recruitmentData: {
        name: [],
        frequency: []
      }
    }
  },
  beforeDestroy() {
    socketBus.$off(debugEvent) // sockeBus解绑debugEvent事件
  },
  mounted() {
    this.resumeChartsInit()
    this.interviewChartsInit()
    this.recruitmentChartsInit()
    useSocket(this.$store.getters.employerId)
    socketBus.$on(debugEvent, this.dealResult) // sockeBus绑定debugEvent事件
  },
  methods: {
    resumeChartsInit() {
      chartsResume().then(
        (response) => {
          this.resumeData = response.data
          this.$echarts.init(document.getElementById('resume')).setOption({
            title: {
              text: '简历概览',
              subtext: '各职位收到简历的处理情况',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '简历概览',
                type: 'pie',
                radius: '50%',
                data: this.resumeData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        }
      )
    },
    interviewChartsInit() {
      chartsInterview().then(
        (response) => {
          this.interviewData = response.data
          this.$echarts.init(document.getElementById('interview')).setOption({
            title: {
              text: '邀约概览',
              subtext: '各职位发出邀约的处理情况',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '邀约',
                type: 'pie',
                radius: '50%',
                data: this.interviewData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        }
      )
    },
    recruitmentChartsInit() {
      chartsRecruitment().then(
        (response) => {
          for (let i = 0; i < response.data.length; i++) {
            this.recruitmentData.name.push(response.data[i].name)
            this.recruitmentData.frequency.push(response.data[i].value)
          }
          // console.log(this.recruitmentData)
          this.$echarts.init(document.getElementById('recruitment')).setOption({
            title: {
              text: '职位概览',
              subtext: '各个已发布职位的浏览总数',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function(params) {
                var tar = params[0]
                return tar.name + '<br/>浏览次数：' + tar.value
              }
            },
            xAxis: {
              type: 'category',
              data: this.recruitmentData.name
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: this.recruitmentData.frequency,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
              }
            }]
          })
        })
    },
    dealResult(data) {
      this.$notify.success(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
